<template>
  <div class="container">
    <div class="premium-summary">
        <div class="content-item cell">
            <i-cell class="cell-panel" title="选择下级子公司" v-model="orgName" url='/pages/center/chooseDepartment?type=premium' is-link></i-cell>
        </div>
        <div class="content-item">
            <h3>保费查看</h3>
            <div class="search-data">
                <picker class="picker" mode="date" v-model="searchDate" @change="bindTimeChange" fields='month'>
                    <i-input v-model="searchDate" disabled="false" title="日期" placeholder="请选择日期" />
                </picker>
                <!-- <span>日期</span>
                <input type="text">
                <span>至</span>
                <input type="text"> -->
            </div>
            <div class="desc">
                <div class="left">
                    <div>
                        <p>保费总额（元）</p>
                        <p>{{bill.F_Balance}}</p>
                    </div>
                    <div>
                        <p>在保人数</p>
                        <p>{{bill.InsuranceCount}}人</p>
                    </div>
                </div>
                <div class="right">
                    <div>
                        <p>批加：<span>{{bill.F_AddFee}}元</span></p>
                    </div>
                    <div>
                        <p>批减：<span>{{bill.F_LessFee}}元</span></p>
                    </div>
                    <div>
                        <p>上次结余：<span>{{bill.F_LastBalance}}元</span></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-item">
            <h3>在用方案</h3>
            <ul class="fangan-list">
                <li v-for="(item, index) in planList" :key="index">
                    <div>{{index - 0 + 1}}.{{item.F_ProgramName}}</div> <div>保费：{{item.F_Insfee}}</div>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
import { getBill } from '@/api/api'
import { mapState } from 'vuex'
export default {
    data () {
        return {
            orgId: '',
            orgName: '',
            searchDate: '',
            planList: [],
            bill: {
                F_AddFee: 0,
                F_Balance: 0,
                F_Id: null,
                F_LastBalance: 0,
                F_LessFee: 0,
                F_Month: null,
                F_Year: null,
                InsuranceCount: 0
            }
        }
    },

    methods: {
        bindTimeChange (e) {
            console.log(e)
            this.searchDate = e.mp.detail.value
            this._getBill()
        },
        initDate () {
            this.planList = []
            this.bill = {
                F_AddFee: 0,
                F_Balance: 0,
                F_Id: null,
                F_LastBalance: 0,
                F_LessFee: 0,
                F_Month: null,
                F_Year: null,
                InsuranceCount: 0
            }
        },
        _getBill () {
            if (this.premiumChooseInfo === {}) {
                wx.showToast({
                    title: '请选择下级子公司',
                    icon: 'error',
                    mask: true
                })
                return
            }
            this.orgId = this.premiumChooseInfo.F_Id
            this.orgName = this.premiumChooseInfo.F_FullName
            let year = this.searchDate.split('-')[0]
            let month = this.searchDate.split('-')[1]
            getBill(year, month, this.orgId)
                .then((res) => {
                    console.log(res)
                    this.$store.commit('org/SETPREMIUMCHOOSEINFO', {})
                    res.data.plan.forEach(item => {
                        item.F_Insfee = item.F_Insfee.replace('&nbsp;', ' ')
                    })
                    this.planList = res.data.plan
                    this.bill = res.data.bill
                })
        }
    },
    computed: {
        ...mapState({
            premiumChooseInfo: state => state.org.premiumChooseInfo
        })
    },

    onShow () {
        console.log(this.premiumChooseInfo)
        this.orgId = this.premiumChooseInfo.F_Id
        this.orgName = this.premiumChooseInfo.F_FullName
        this.initDate()
    }
}
</script>

<style lang='stylus' scoped>
.premium-summary
    width 750rpx
    .i-input-input
        text-align right
    .content-item
        margin-top 15rpx
        padding 0 40rpx
        background #fff
        font-size 28rpx
        &.cell
            padding 0
        h3
            height 100rpx
            line-height 100rpx
            font-weight 600
            border-bottom 1rpx solid #f3f3f3
        .search-data
            display flex
            height 100rpx
            line-height 100rpx
            .picker
                width 100%
                .i-cell
                    border-bottom 0
        .desc
            display flex
            flex-direction row
            div
                display flex
                flex-direction column
                width 50%
                &.right
                    div
                        width 100%
                        height 100rpx
                        line-height 100rpx
                        border-bottom 1rpx solid #f3f3f3
                        padding-left 24rpx
                        &:last-child
                            border none
                &.left
                    border-right 1rpx solid #f3f3f3
                    text-align center
                    align-items center
                    div
                        padding-top 39rpx
                        box-sizing border-box
                        width 100%
                        height 150rpx
                        border-bottom 1rpx solid #f3f3f3
                        &:last-child
                            border none
        .fangan-list
            li
                display flex
                justify-content space-between
                min-height 100rpx
                line-height 100rpx
                border-bottom 1rpx solid #f3f3f3
</style>
